import { defaultRecentlyDay } from '@/utils/time';
import { excelDataAndMergeConf, handleModeType, markSlitData, MessageError, MessageWaring } from '@/utils/tool';
import { Button, Cascader, Input, Modal, Pagination, Radio, Select, TreeSelect } from 'antd';
import { DateRangePicker } from 'element-react';
import { FC, SetStateAction, useEffect, useRef, useState } from 'react';
import './index.less';
import { markingBackT, MarkingPageQueryT, FtpPageQueryT, MarkingSelectT } from '@/typings/global';
import { useStores } from '@/stores';
import { Storage } from '@/utils/storage';
import { DownloadOutlined } from '@ant-design/icons';

// 上述三个方法，可以合并成一个方法

// 上面的复用marking分析
// import { Options } from './index.type';
import { dataShowOptions, dataSource } from './options';
import TableLists from './components/TableList';
import { reportDescription } from './index.report';
import { OptionsType, TreeDataType, CascaderOption, FlawFilterType, SearchType, SearchKeyType, DetailSearchType } from './index.type';
import { getFpyConfig } from '@/api/config/index';
import { getQueryFpy } from '@/api/fpy-analyse/index';
import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import { DataSourceType, FathertableDatasType, SontableDatasType } from './components/TableList/index.type';

// 这个页面根据业务来自行设计吧
const newPage: FC = () => {
  // 这里复用marking分析，后续删除
  const { markingStore, lotStore } = useStores();
  const [queryType, setQueryType] = useState<MarkingPageQueryT>(MarkingPageQueryT.time);
  const [layerIdVal, setLayerIdVal] = useState<string>('');
  const [time, setTime] = useState<Array<Date>>(defaultRecentlyDay(7));
  const [exportLoading, setExportLoading] = useState<boolean>(false); // 导出按钮的loading
  const modelResult = handleModeType(markingStore.allNotGoodType);
  markingStore.allNotGoodFatherMap = modelResult.allNotGoodFatherMap;

  // 新的sate
  const navigator = useNavigate();
  const [lotId, setLotId] = useState<string>('');
  const [searchLoading, setSearchLoading] = useState(false);
  const [size, setSize] = useState<number[]>([]); //尺寸
  const [sizeOptions, setSizeOptions] = useState<OptionsType[]>([]); //size的options
  const [grade, setGrade] = useState<string[]>([]); //Grade的value
  const [gradeOptions, setGradeOptions] = useState<OptionsType[]>([]); //Grade的options
  const [dataShow, setDataShow] = useState<any[]>(dataShowOptions); //数据显示
  const [cascaderOptions, setCascaderOptions] = useState<CascaderOption[]>([]);
  const [selectedValues, setSelectedValues] = useState([['piantiehou'], ['pol'], ['not_appoint']]); //级联选择值
  const [flawFilter, setFlawFilter] = useState<FlawFilterType>({
    piantiehou: {},
    pol: {},
    not_appoint: false
  });
  const [isShowReport, setIsShowReport] = useState(false); //Model框
  const [fatherColumn, setFatherColumn] = useState<ColumnsType<FathertableDatasType>>([]);
  const [sonColumn, setSonColumn] = useState<ColumnsType<SontableDatasType>>([]);
  const [tableDataSource, setTableDataSource] = useState<DataSourceType>({ total: 0, list: [] });
  const [pageNum, setPageNum] = useState(1); //页码
  const [pageSize, setPageSize] = useState(5); //每页展示的数量
  const [tableLoading, setTableLoading] = useState(false);

  useEffect(() => {
    getFpyConfigs();
    // setTableDataSource();
  }, []);

  // 还要分模块
  let fatherColumns: ColumnsType<FathertableDatasType> = [
    {
      title: 'RTP LOT',
      dataIndex: 'lotId',
      key: 'lotId',
      align: 'center'
    },
    {
      title: 'Grade',
      dataIndex: 'grade',
      key: 'grade',
      align: 'center'
    },
    {
      title: '尺寸',
      dataIndex: 'size',
      key: 'size',
      align: 'center'
    },
    {
      title: 'yield',
      dataIndex: 'yield',
      key: 'yield',
      align: 'center'
    },
    {
      title: '前制程LOT',
      dataIndex: 'layerId',
      key: 'layerId',
      align: 'center'
    },
    {
      title: '检测量',
      dataIndex: 'checkCount',
      key: 'checkCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.summury, SearchKeyType.check_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },
    {
      title: 'ok量',
      dataIndex: 'okCount',
      key: 'okCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.summury, SearchKeyType.ok_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },

    {
      title: '最终ok量',
      dataIndex: 'finOkCount',
      key: 'finOkCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.summury, SearchKeyType.fin_ok_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },
    {
      title: '直通率',
      dataIndex: 'straightThroughRate',
      key: 'straightThroughRate',
      align: 'center'
    },
    {
      title: '漏检量',
      dataIndex: 'missCount',
      key: 'missCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.summury, SearchKeyType.miss_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },
    {
      title: '漏检率',
      dataIndex: 'missRate',
      key: 'missRate',
      align: 'center'
    },
    {
      title: '过检量',
      dataIndex: 'overCount',
      key: 'overCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.summury, SearchKeyType.over_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },
    {
      title: '过检率',
      dataIndex: 'overRate',
      key: 'overRate',
      align: 'center'
    }
  ];

  let sonColumns: ColumnsType<SontableDatasType> = [
    {
      title: '工站',
      dataIndex: 'site',
      key: 'site',
      align: 'center',
      onCell: (record, index) => {
        if (record.site !== '未指定') {
          if (record.oneRowSpan) {
            return { rowSpan: record.oneRowSpan };
          } else {
            return { rowSpan: 0 };
          }
        } else {
          if (record.site === '未指定') {
            return { colSpan: 3 };
          } else {
            return { rowSpan: 1 };
          }
        }
      }
    },
    {
      title: '工位',
      dataIndex: 'station',
      key: 'station',
      align: 'center',
      onCell: (record, index) => {
        // console.log(`record`, record)
        if (record.site !== '未指定') {
          if (record.oneRowSpan) {
            return { rowSpan: record.oneRowSpan };
          } else {
            return { rowSpan: 0 };
          }
        } else {
          return { colSpan: 0 };
        }
        // return {}
      }
    },
    {
      title: '缺陷类型',
      dataIndex: 'className',
      key: 'className',
      align: 'center',
      onCell: (record, index) => {
        if (record.site === '未指定') {
          return { colSpan: 0 };
        } else {
          return {};
        }
      }
    },
    {
      title: '检测量',
      dataIndex: 'checkCount',
      key: 'checkCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.detail, SearchKeyType.check_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },
    {
      title: 'ok量',
      dataIndex: 'okCount',
      key: 'okCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.detail, SearchKeyType.ok_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },

    {
      title: '最终ok量',
      dataIndex: 'finOkCount',
      key: 'finOkCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.detail, SearchKeyType.fin_ok_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },
    {
      title: '直通率',
      dataIndex: 'straightThroughRate',
      key: 'straightThroughRate',
      align: 'center'
    },
    {
      title: '漏检量',
      dataIndex: 'missCount',
      key: 'missCount',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.detail, SearchKeyType.miss_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },
    {
      title: '漏检率',
      dataIndex: 'missRate',
      key: 'missRate',
      align: 'center'
    },
    {
      title: '过检量',
      dataIndex: 'missRate',
      key: 'missRate',
      align: 'center',
      render: (text, record, index) => (
        <a onClick={() => handleDetailClick(DetailSearchType.detail, SearchKeyType.over_count, text, record, index)} style={{ textDecoration: 'underline' }}>
          {text}
        </a>
      )
    },
    {
      title: '过检率',
      dataIndex: 'overRate',
      key: 'overRate',
      align: 'center'
    }
  ];

  /**
   * @description: 点击路由跳转
   * @param {any} text
   * @param {any} record
   * @param {any} index
   * @return {*}
   */
  const handleDetailClick = (searchType: DetailSearchType, searchKey: SearchKeyType, text: any, record: any, index: any): void => {
    console.log(searchType, searchKey, text, record, index);
    if (searchType === DetailSearchType.summury) {
      const { lotId } = record;
      const params = { searchType, searchKey, lotId };
      navigator('/fpy-detail', { state: params });
      return;
    }

    if (searchType === DetailSearchType.detail) {
      const { lotId, site, station, classId } = record;
      const params = { searchType, searchKey, lotId, site, station, classId };
      navigator('/fpy-detail', { state: params });
      return;
    }
  };

  // 使用exceljs实现导出
  // const exportExcel = async () => {
  //   setExportLoading(true);
  //   try {
  //     const data = await dataQuerey();
  //     if (!data.list || data.list.length == 0) {
  //       setExportLoading(false);
  //       return MessageError('数据为空，无法导出！');
  //     }
  //     if (!markingStore.markingFieldChecked) {
  //       setExportLoading(false);
  //       return MessageError('至少设置一个字段！');
  //     }
  //     // 创建工作簿
  //     const workbook = new ExcelJS.Workbook();
  //     workbook.creator = 'leaper';
  //     workbook.created = new Date(2023, 10, 25);

  //     data.list?.forEach((layer: markingBackT) => {
  //       // 添加工作表
  //       const worksheet = workbook.addWorksheet(layer.layerId);
  //       const handleData = markSlitData(layer);
  //       const config = excelDataAndMergeConf(handleData, markingStore.markingFieldChecked);

  //       // 添加大卷涂层信息
  //       const layerTitle = [] as string[];
  //       const layerData = [] as Array<string | number>;
  //       MARK_LAYER_COLUMNS.forEach(item => {
  //         layerTitle.push(item.title);
  //         layerData.push(layer[item.key]);
  //       });
  //       config.data.unshift(layerTitle, layerData, []);

  //       worksheet.addRows(config.data);
  //       // 合并单元格
  //       config.mergeConf?.forEach((item: { s: { r: number; c: number }; e: { r: number; c: number } }) => {
  //         worksheet.mergeCells(item?.s.r, item?.s.c, item?.e.r, item?.e.c);
  //       });

  //       // 设置合并单元格的样式,只对有合并单元格操作的格子进行垂直居中操作
  //       worksheet.eachRow(row => {
  //         row.eachCell(cell => {
  //           if (cell.master) {
  //             cell.alignment = { vertical: 'middle' };
  //           }
  //         });
  //       });
  //     });

  //     // 生成Excel文件
  //     workbook.xlsx.writeBuffer().then(data => {
  //       const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  //       const url = window.URL.createObjectURL(blob);
  //       const a = document.createElement('a');
  //       a.href = url;
  //       a.download = `涂层信息_${moment().format('YYYY-MM-DD HH:mm:ss')}.xlsx`;
  //       a.click();
  //       window.URL.revokeObjectURL(url);
  //     });
  //     setExportLoading(false);
  //   } catch (error) {
  //     console.log('导出接口出错_关闭加载按钮', error);
  //     setExportLoading(false);
  //   }
  // };

  // 上面内容等待开发完毕根据需求删除

  /**
   * @description: 页码查询的参数以及处理成展示的格式
   * @return {*}
   */
  const getFpyConfigs = async () => {
    setFatherColumn(fatherColumns);
    setSonColumn(sonColumns);
    let res = await getFpyConfig();
    const { Grade, factorySummury, lotSize, stationWithFlaw } = res.data;
    handleGrade(Grade);
    const { data } = lotSize;
    handleSize(data);
    handleTree(stationWithFlaw);
  };

  /**
   * @description: 处理config的配置参数
   * @param {string} Grade
   * @return {*}
   */
  const handleGrade = (Grade: string[]) => {
    const newGradeArr = Grade.map(item => ({ label: item, value: item }));
    setGrade(Grade);
    setGradeOptions(newGradeArr);
  };

  /**
   * @description: 处理size的配置参数
   * @param {any} data
   * @return {*}
   */
  const handleSize = (data: any) => {
    let newLotSize: number[] = [];
    Object.keys(data).forEach(key => {
      newLotSize.push(Number(key));
    });
    setSize(newLotSize);
    const newSizeOptionsArr = newLotSize.map(item => ({ label: item, value: item }));
    setSizeOptions(newSizeOptionsArr);
  };

  /**
   * @description: 生成treeSelect的options
   * @param {TreeDataType} data
   * @return {*}
   */
  const handleTree = (data: TreeDataType) => {
    console.log(`data`, data);
    const options: CascaderOption[] = data.map(site => ({
      label: site.site,
      value: site.siteKey,
      children: site.station.map(station => ({
        label: station.stationName,
        value: station.stationKey,
        children: station.classIdArr.map(classId => ({
          label: ` ${classId}`,
          value: classId
        }))
      }))
    }));
    console.log(`options`, options);
    setCascaderOptions(options);
    return options;
  };

  /**
   * @description: 尺寸发生变化时,将新值赋值给sizeValues
   * @param {string} e
   * @return {*}
   */
  const handleSizeChange = (e: any): void => {
    console.log(`handleSizeChange`, e);
    setSize(e);
  };

  /**
   * @description: Grade发生变化
   * @param {any} e
   * @return {*}
   */
  const handleGradeChange = (e: any): void => {
    console.log(`handleGradeChange`, e);
    setGrade(e);
  };

  /**
   * @description: 数据显示发生变化
   * @param {*} e
   * @return {*}
   */
  const handleDataShowChange = (e): void => {
    console.log(`handleDataShowChange`, e);
    setDataShow(e);
    if (e.length === 0) {
      // 删除后面四个colum
      fatherColumns = fatherColumns.slice(0, 9);
      sonColumns = sonColumns.slice(0, 7);
      setFatherColumn(fatherColumns);
      setSonColumn(sonColumns);
    }
    if (e.length === 1 && e[0] === '漏检率') {
      fatherColumns = fatherColumns.slice(0, 11);
      sonColumns = sonColumns.slice(0, 9);
      setFatherColumn(fatherColumns);
      setSonColumn(sonColumns);
    }

    if (e.length === 1 && e[0] === '过检率') {
      fatherColumns = fatherColumns.slice(0, 8).concat(fatherColumns.slice(11));
      sonColumns = sonColumns.slice(0, 6).concat(sonColumns.slice(9));
      setFatherColumn(fatherColumns);
      setSonColumn(sonColumns);
    }

    if (e.length === 2) {
      fatherColumns = fatherColumns;
      sonColumns = sonColumns;
      setFatherColumn(fatherColumns);
      setSonColumn(sonColumns);
    }
  };

  /**
   * @description: 查询事件
   * @param {*} void
   * @return {*}
   */
  const handleSearch = async () => {
    setSearchLoading(true);
    try {
      const params = determineParameterForm();
      const res = await getQueryFpy(params);
      setTableDataSource(res.data);
      if (res.code === 200) {
        setPageNum(1);
        setSearchLoading(false);
      }
    } catch (error) {
      console.log(`error`, error);
      setSearchLoading(false);
    }
  };

  /**
   * @description: 判断查询参数的格式,初始化页面参数，查询参数
   * @return {*}
   */
  const determineParameterForm = () => {
    let params: any = {}; // 显式声明 params 的类型为 SearchParamsType
    console.log(time);
    if (queryType === 'time') {
      let startTime = new Date(time[0]).getTime();
      let endTime = new Date(time[1]).getTime();
      params = { searchType: SearchType.time, flawFilter, startTime, endTime, pageNum: 1, pageSize };
    }
    if (queryType === 'lot') {
      params = { searchType: SearchType.lotId, flawFilter, lotId, pageNum: 1, pageSize };
    }
    if (sizeOptions.length !== size.length) {
      params.size = size;
    }

    if (gradeOptions.length !== grade.length) {
      params.grade = grade;
    }

    return params;
  };

  /**
   * @description: 打开报表说明框
   * @return {*}
   */
  const handleReport = () => {
    setIsShowReport(true);
  };

  /**
   * @description: 关闭报表说明框
   * @return {*}
   */
  const handleCancel = () => {
    setIsShowReport(false);
  };

  /**
   * @description: 缺陷类型参数
   * @param {*} value
   * @param {*} selectedOptions
   * @param {object} pol
   * @param {false} not_appoint
   * @return {*}
   */
  const onCascaderChanges = (value, selectedOptions) => {
    // 根据用户选择的数据生成FlawFilterType对象
    const flawFilterType: any = {
      piantiehou: {
        上反: undefined,
        下反: undefined,
        透射: undefined
      },
      pol: {
        KE透射: undefined
      },
      not_appoint: false
    };
    console.log(`selectedOptions`, selectedOptions);
    selectedOptions.map((item, index) => {
      const [factory] = item;
      console.log(`factory_${factory.value}`, factory);
      // 说明这个工站全选
      if (item.length === 1) {
        const { children, value } = factory;
        if (value === 'piantiehou') {
          // console.log(`偏贴后工厂全选`, factory);
          children.map(item => {
            if (item.value === '上反') {
              flawFilterType.piantiehou.上反 = item.children.map(item => {
                return item.value;
              });
            }

            if (item.value === '下反') {
              flawFilterType.piantiehou.下反 = item.children.map(item => {
                return item.value;
              });
            }

            if (item.value === '透射') {
              flawFilterType.piantiehou.透射 = item.children.map(item => {
                return item.value;
              });
            }
          });
        }
        if (value === 'pol') {
          console.log(`pol工厂全选`, factory);
          children.map(item => {
            if (item.value === 'KE透射') {
              flawFilterType.pol.KE透射 = item.children.map(item => {
                return item.value;
              });
            }
          });
        }

        if (value === 'not_appoint') {
          flawFilterType.not_appoint = true;
        } else {
          flawFilterType.not_appoint = false;
        }
      }

      // 说明选择了这个工站的某个工位
      // if (item.length === 2) {
      //   console.log(`工位全选`, item);
      //   const [factory, station] = item;
      //   if ((factory.value = 'piantiehou' && station.value === '上反')) {
      //     flawFilterType.piantiehou.上反 = station.children.map(item => {
      //       return item.value;
      //     });
      //   }
      //   //
      // }

      // 说明选择了某个工位的某些缺陷
      if (item.length === 3) {
        console.log(`某个缺陷选`, item);
      }
    });

    setSelectedValues(value);
    console.log(`value`, value);

    console.log(flawFilterType); // 在控制台输出生成的FlawFilterType对象
    setFlawFilter(flawFilterType);
  };

  /**
   * @description: 点击页码
   * @param {number} page
   * @param {number} pageSize
   * @return {*}
   */
  const handleChangePage = async (page: number, pageSize: number) => {
    console.log(`page`, page);
    console.log(`pageSize`, pageSize);
    try {
      setTableLoading(true);
      const param = determineParameterForm();
      param.pageNum = page;
      const res = await getQueryFpy(param);
      if (res.code === 200) {
        console.log(`res`, res);
        setPageNum(page);
        setTableDataSource(res.data);
        setTableLoading(false);
      }
    } catch (error) {
      console.log(`error`, error);
    }
  };

  /**
   * @description: 导出excel表格
   * @return {*}
   */
  const handleExportExcel = async () => {
    // 可以封装成一个传参函数，返回指定参数(明天加)
    setExportLoading(true);
    const params = determineParameterForm();
    delete params.pageNum;
    delete params.pageSize;
    try {
      const res = await getQueryFpy(params);
      console.log(res);
      const { list } = res.data;

      // 导出逻辑.....

      if (res.code === 200) {
        setExportLoading(false);
      }
    } catch (error) {
      console.log(`error`, error);
    }
  };

  return (
    <div className="marking-page">
      <div className="operator-bar">
        <Radio.Group
          style={{ marginLeft: 20 }}
          onChange={(e: any) => {
            setQueryType(e.target.value);
            if (e.target.value === MarkingPageQueryT.time) {
              setLayerIdVal('');
            }
          }}
          value={queryType}
        >
          <Radio value={MarkingPageQueryT.time}>检测时间:</Radio>
          <DateRangePicker
            className="hourTime"
            style={{ marginRight: 20 }}
            value={time}
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期范围"
            isShowTime={true}
            onChange={date => {
              console.debug('重新选择查询时间，重新设置到组件显示 time:', date);
              setTime(date);
            }}
            isDisabled={queryType === MarkingPageQueryT.lot}
          />
          <Radio value={MarkingPageQueryT.lot} style={{ marginLeft: 20 }}>
            RTP LOT:
          </Radio>
        </Radio.Group>
        <Input
          className="lot-input"
          disabled={queryType === MarkingPageQueryT.time}
          allowClear={true}
          value={lotId}
          onChange={val => {
            setLotId(val.target.value);
          }}
        ></Input>
        {/* <div className="operator-bar-item">
          <div>缺陷筛选：</div>
          <TreeSelect {...tProps} />
        </div> */}
        <div className="operator-bar-item">
          <div>缺陷筛选：</div>
          <Cascader style={{ width: '200PX' }} value={selectedValues} options={cascaderOptions} onChange={onCascaderChanges} multiple maxTagCount="responsive" />
        </div>

        <div className="operator-bar-item">
          <div>尺寸：</div>
          <Select
            mode="multiple"
            allowClear
            style={{ width: '200px' }}
            placeholder="Please select"
            maxTagCount={2}
            defaultValue={sizeOptions}
            value={size}
            onChange={handleSizeChange}
            options={sizeOptions}
          />
        </div>

        <div className="operator-bar-item">
          <div>Grade：</div>
          <Select mode="multiple" allowClear style={{ width: '200px' }} placeholder="请选择" value={grade} onChange={handleGradeChange} options={gradeOptions} />
        </div>

        <div className="operator-bar-item">
          <div>数据显示：</div>
          <Select
            mode="multiple"
            allowClear
            value={dataShow}
            style={{ width: '200px' }}
            placeholder="Please select"
            defaultValue={dataShowOptions}
            onChange={handleDataShowChange}
            options={dataShowOptions}
          />
        </div>

        <div className="operator-bar-item">
          <Button type="primary" loading={searchLoading} onClick={handleSearch}>
            查询
          </Button>
        </div>

        <div className="operator-bar-item">
          {' '}
          <Button type="primary" loading={exportLoading} icon={<DownloadOutlined />} onClick={handleExportExcel}>
            导出
          </Button>
        </div>

        <div className="operator-bar-item">
          <Button type="primary" onClick={handleReport}>
            报表说明
          </Button>
        </div>
      </div>
      <div className="fpy_analyse_table">
        <TableLists
          fatherColumns={fatherColumn}
          sonColumns={sonColumn}
          dataSource={tableDataSource}
          pageSize={pageSize}
          pageNum={pageNum}
          handleChangePage={handleChangePage}
          tableLoading={tableLoading}
        />
      </div>

      <Modal title={<h1 className="centered-title">报表说明</h1>} open={isShowReport} footer={null} onCancel={handleCancel}>
        <div>
          {reportDescription.map((item, index) => (
            <div>
              <h1 className="report_h1" key={index}>
                {item.title}
              </h1>
              {item.datas.map((items, indexs) => (
                <p key={indexs}>{items}</p>
              ))}
            </div>
          ))}
        </div>
      </Modal>
    </div>
  );
};
export default newPage;
